<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JavaScript专题之跟着underscore学防抖</title>
	<style type="text/css">
		#container {
			height: 200px;
			line-height: 200px;
			text-align: center;
			color: #fff;
			font-size: 30px;
			background-color: #666;
		}
	</style>
</head>
<body>
	<h1>JavaScript专题之跟着underscore学防抖</h1>
	<div id="container"></div>
	<button id="button">取消</button>


<script type="text/javascript">
var count = 1;
var container = document.getElementById('container');
function getUserAction(e) {
	container.innerHTML = count++;
}
// container.onmousemove = debounce(getUserAction, 1000, true);

// 第一版
// function debounce(func, wait) {
// 	var timeout;
// 	return function() {
// 		clearTimeout(timeout);
// 		timeout = setTimeout(func, wait);
// 	}
// }

// 第二版，修复event对象及this指向
// function debounce(func, wait) {
// 	var timeout;
// 	console.log(this);  //window
// 	return function() {
// 		var context = this;
// 		var args = arguments;
// 		clearTimeout(timeout);
// 		timeout = setTimeout(function() {
// 			func.apply(context, args);
// 		}, wait);
// 	}
// }

// 第三版：立即执行
// function debounce(func, wait, immediate) {
// 	var timeout;
// 	return function() {
// 		var context = this;
// 		var args = arguments;
// 		if(timeout) clearTimeout(timeout);
// 		if(immediate) {
// 			// 如果已经执行，不再执行
// 			var callNow = !timeout;
// 			timeout = setTimeout(function() {
// 				timeout = null;
// 			}, wait);
// 			if(callNow) func.apply(context, args);
// 		} else {
// 			timeout = setTimeout(function() {
// 				func.apply(context, args);
// 			}, wait);
// 		}
// 	}
// }

// 第四版：返回值
// function debounce(func, wait ,immediate) {
// 	var timeout, result;
// 	return function() {
// 		var context = this;
// 		var args = arguments;
// 		if(timeout) clearTimeout(timeout);
// 		if(immediate) {
// 			// 如果已经执行，不再执行
// 			var callNow = !timeout;
// 			timeout = setTimeout(function(){
// 				timeout = null;
// 			}, wait);
// 			if(callNow) result = func.apply(context, args);
// 		} else {
// 			tiemout = setTimeout(function() {
// 				func.apply(context, args);
// 			}, wait);
// 		}
// 		return result;
// 	}
// }

// 第五版：取消
function debounce(func, wait, immediate) {
	var timeout, result;
	var debounced = function() {
		var context = this;
		var args = arguments;
		if(timeout) clearTimeout(timeout);
		if(immediate) {
			// 如果已经执行，不再执行
			var callNow = !timeout;
			timeout = setTimeout(function() {
				timeout = null;
			}, wait);
			if(callNow) result = func.apply(context, args);
		} else {
			timeout = setTimeout(function() {
				func.apply(context, args);
			}, wait);
		}
		return result;
	};

	debounced.cancel = function() {
		clearTimeout(timeout);
		timeout = null;
	};

	return debounced;
}
var setUseAction = debounce(getUserAction, 1000, true);
container.onmouseover = setUseAction;
document.getElementById('button').addEventListener('click', function() {
	setUseAction.cancel();
})
</script>

</body>
</html>